<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改测试用例')" />
	<style type="text/css">
		.file-div {
			float: left;
		}
		.file-img {
			width:60;height:50px;margin-right:5px;margin-bottom:5px;
		}
	</style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-demo-edit" th:object="${demo}">
            <input id="id" name="id" th:field="*{id}"  type="hidden">
			<div class="form-group">	
				<label class="col-sm-3 control-label">编码：</label>
				<div class="col-sm-8">
					<input id="code" name="code" th:field="*{code}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">名称：</label>
				<div class="col-sm-8">
					<input id="name" name="name" th:field="*{name}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">oss附件上传：</label>
				<div class="col-sm-5">
					<input id="ossFile" type="file" class="form-control" name="ossFile" />
				</div>
				<div class="col-sm-3">
					<input type="button" value="上传oss附件" class="form-control" style="background-color: #0071ce;color: #fff;" onclick="ossUpload();" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">oss附件显示：</label>
				<div class="col-sm-8" id="uploadOssFileDiv">
					<div th:each="demo,demoStat:${ossFileUrlList}" class="file-div">
						<img class="file-img" th:src="${demo}" />
					</div>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">附件上传：</label>
				<div class="col-sm-5">
					<input id="file" type="file" class="form-control" name="file" />
				</div>
				<div class="col-sm-3">
					<input type="button" value="上传附件" class="form-control" style="background-color: #0071ce;color: #fff;" onclick="upload();" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">附件显示：</label>
				<div class="col-sm-8" id="uploadFileDiv">
					<div th:each="demo,demoStat:${fileUrlList}" class="file-div">
						<img class="file-img" th:src="${demo}" />
					</div>
				</div>
			</div>
		</form>
    </div>
    <div th:include="include::footer"></div>
	<script th:src="@{/js/ajaxfileupload.js}"></script>
    <script type="text/javascript">
		var prefix = ctx + "sys/demo";
		$("#form-demo-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			},
			focusCleanup: true
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/edit", $('#form-demo-edit').serialize());
	        }
	    }
		
		function ossUpload() {
	    	if(!$("#ossFile").val()) {
           		$.modal.alertError("请选择附件");
           		return;
	    	}
			var id = $("#id").val();
			$.ajaxFileUpload({
                 url: prefix + '/ossUpload',
                 type:'post',
                 secureuri: false, //是否需要安全协议，一般设置为false
                 fileElementId: 'ossFile', //文件上传域的ID
                 dataType: 'application/json', //返回值类型 一般设置为json
                 data:{id:id},
                 success: function (data, status) {
                	 data = $.parseJSON(data.replace(/<.*?>/ig,""));
                	 if(data && data.code=="0") {
	                	 var img = '<div class="file-div"><img class="file-img" src="'+data.data+'" /></div>';
	                	 $("#uploadOssFileDiv").append(img);
	                	 $.modal.alertSuccess("上传成功");
                	 } else {
                    	 $.modal.alertError("上传失败");
                	 }
                 },
                 error: function (data, status, e) {
                	 $.modal.alertError("上传失败");
                 }
			});
	    }
		
		function upload() {
	    	if(!$("#file").val()) {
           		$.modal.alertError("请选择附件");
           		return;
	    	}
			var id = $("#id").val();
			$.ajaxFileUpload({
                 url: prefix + '/upload',
                 type:'post',
                 secureuri: false, //是否需要安全协议，一般设置为false
                 fileElementId: 'file', //文件上传域的ID
                 dataType: 'application/json', //返回值类型 一般设置为json
                 data:{id:id},
                 success: function (data, status) {
                	 data = $.parseJSON(data.replace(/<.*?>/ig,""));
                	 if(data && data.code=="0") {
	                	 var img = '<div class="file-div"><img class="file-img" src="'+data.data+'" /></div>';
	                	 $("#uploadFileDiv").append(img);
	                	 $.modal.alertSuccess("上传成功");
                	 } else {
                    	 $.modal.alertError("上传失败");
                	 }
                 },
                 error: function (data, status, e) {
                	 $.modal.alertError("上传失败");
                 }
			});
	    }
	</script>
</body>
</html>
